<template>
  <div class="zizhenduan">
    <div class="sider">
      <div
        @click="siderSelectFn(index)"
        class="sider-item"
        v-for="(item, index) in tabData"
        :key="index"
      >
        <img v-if="index === siderIndex" :src="item.img" alt="" />
        <img v-else :src="item.img2" alt="" />
        <div style="white-space: nowrap; margin-top: 5px">{{ item.name }}</div>
      </div>
    </div>
    <div class="content">
      <div class="content-top">
        <div class="content-top-t">
          <span class="content-top-t-left">
            <span class="top-title">{{ tabData[siderIndex].name }}</span>
            <span class="top-status">
              <span
                v-if="tabData[siderIndex].fuwuqiState == '正常'"
                class="top-status-iconblue"
              ></span>
              <span v-else class="top-status-iconred"></span>
              <span
                v-if="tabData[siderIndex].fuwuqiState == '正常'"
                class="top-status-text"
                style="color: #49a6f2"
                >正常</span
              >
              <el-popover
                v-else
                placement="bottom"
                :width="400"
                trigger="click"
                popper-class="top-wrap1"
              >
                <template #reference>
                  <div style="display: flex; align-items: center">
                    <span style="color: #f56c6c; margin: 0 5px">异常</span>
                    <img src="@/assets/fuwuqi/异常图标.png" alt="" />
                  </div>
                </template>
                <div class="content">
                  <div>异常排查</div>
                  <div style="max-height: 240px; overflow-y: auto">
                    <div>{{ tabData[siderIndex].errInfos }}</div>
                  </div>
                </div>
              </el-popover>
            </span>
          </span>
          <span class="content-top-t-right">
            <span
              v-for="(item2, index2) in tabData[siderIndex].fileStoreList"
              :key="index2"
              style="margin: 0 50px; display: inline-block"
            >
              <div class="cipanTop">
                <span class="white2 ftsz12">{{ item2.name.slice(4, 11) }}</span>
                <span class="blue ftsz12" style="padding-left: 10px"
                  >{{ (item2.usedSpace / 1024).toFixed(2) }}G/{{
                    (item2.totalSpace / 1024).toFixed(2)
                  }}G</span
                >
              </div>
              <div class="cipanBottom">
                <el-progress
                  :text-inside="false"
                  :show-text="false"
                  :stroke-width="6"
                  :percentage="(item2.usedSpace / item2.totalSpace) * 100"
                  :color="customColors"
                />
              </div>
            </span>
          </span>
          <el-button
            type="primary"
            style="position: absolute; right: 0"
            @click="reStart('重启', tabData[siderIndex])"
            >重启</el-button
          >
        </div>
        <div class="content-top-b">
          <span class="content-top-b-left">
            <span class="white2 ftsz12">安装虚拟机：</span>
            <span class="blue ftsz12">{{ tabData[siderIndex].virtualMachineNum }}</span>
          </span>
          <span class="content-top-b-right">
            <span>
              <span style="display: inline-block; margin: 0 60px">
                <span class="white2 ftsz12">CPU使用率：</span>
                <span class="blue ftsz12">{{
                  tabData[siderIndex].cpuOccupy ? tabData[siderIndex].cpuOccupy + "%" : "-- %"
                }}</span>
              </span>
              <span style="display: inline-block; margin: 0 60px">
                <span class="white2 ftsz12">内存使用率：</span>
                <span class="blue ftsz12">{{
                  tabData[siderIndex].memoryOccupy
                    ? tabData[siderIndex].memoryOccupy + "%"
                    : "-- %"
                }}</span>
              </span>
              <span style="display: inline-block; margin: 0 60px">
                <span class="white2 ftsz12">IP：</span>
                <span
                  class="blue ftsz12"
                  v-for="(ip, index4) in [tabData[siderIndex].hostIpv4s]"
                  :key="index4"
                  >{{
                    index4 != [tabData[siderIndex].hostIpv4s].length - 1
                      ? ip+ " , "
                      : ip
                  }}</span
                >
              </span>
              <span style="display: inline-block; margin: 0 60px">
                <span class="white2 ftsz12">网卡数量：</span>
                <span class="blue ftsz12">{{
                  tabData[siderIndex].networkInterfaceCount
                    ? tabData[siderIndex].networkInterfaceCount
                    : "--"
                }}</span>
              </span>
              <span style="display: inline-block; margin: 0 60px">
                <span class="white2 ftsz12">操作系统：</span>
                <span class="blue ftsz12">{{
                  tabData[siderIndex].operateSystem ? tabData[siderIndex].operateSystem : "--"
                }}</span>
              </span>
            </span>
            <span
              style="
                position: absolute;
                right: 10px;
                display: inline-block;
                cursor: pointer;
              "
            >
              <!-- <span class="white2 ftsz12" style="color: rgba(97, 242, 218, 1)"
                >更多</span
              >
              <span
                class="ftsz12"
                style="margin-left: 5px; color: rgba(97, 242, 218, 1)"
                >></span
              > -->
              <!-- 服务器的更多 -->
              <el-popover
                placement="left"
                :width="1200"
                trigger="click"
                popper-class="wrap4"
              >
                <template #reference>
                  <div
                    class="fwqMore"
                    style="
                      color: rgba(97, 242, 218, 1);
                      position: relative;
                      cursor: pointer;
                      font-size: 12px;
                    "
                  >
                    更多 >
                  </div>
                </template>
                <div class="content">
                  <div
                    class="head_dec3"
                    style="
                      display: flex;
                      color: rgba(255, 255, 255, 1);
                      justify-content: space-around;
                    "
                  >
                    <div>
                      <span>系统版本:</span>
                      <span
                        style="color: rgba(97, 242, 218, 1); padding-left: 5px"
                        >{{
                          tabData[siderIndex].systemVersion
                            ? tabData[siderIndex].systemVersion
                            : "--"
                        }}</span
                      >
                    </div>
                    <div>
                      <span>CPU核心:</span>
                      <span
                        style="color: rgba(97, 242, 218, 1); padding-left: 5px"
                        >{{
                          tabData[siderIndex].osCpuCores ? tabData[siderIndex].osCpuCores : "--"
                        }}</span
                      >
                    </div>
                    <div>
                      <span>CPU线程:</span>
                      <span
                        style="color: rgba(97, 242, 218, 1); padding-left: 5px"
                        >{{
                          tabData[siderIndex].totalThreads
                            ? tabData[siderIndex].totalThreads
                            : "--"
                        }}</span
                      >
                    </div>
                    <div>
                      <span>内存:</span>
                      <span
                        style="color: rgba(97, 242, 218, 1); padding-left: 5px"
                        >{{
                          tabData[siderIndex].memory
                            ? (tabData[siderIndex].memory / 1024).toFixed(2)
                            : "--"
                        }}G</span
                      >
                    </div>
                    <div>
                      <span>显卡信息:</span>
                      <span
                        style="color: rgba(97, 242, 218, 1); padding-left: 5px"
                        >{{
                          tabData[siderIndex].graphicsCards
                            ? tabData[siderIndex].graphicsCards
                            : "--"
                        }}</span
                      >
                    </div>
                    <div>
                      <span>网卡数量:</span>
                      <span
                        style="color: rgba(97, 242, 218, 1); padding-left: 5px"
                        >{{
                          tabData[siderIndex].networkInterfaceCount
                            ? tabData[siderIndex].networkInterfaceCount
                            : "--"
                        }}</span
                      >
                    </div>
                  </div>
                </div>
              </el-popover>
            </span>
          </span>
        </div>
      </div>
      <div class="content-center">
        <img
          v-for="(item, index) in tabData[siderIndex].virtualMachineInfos"
          :key="index"
          src="@/assets/fuwuqi/箭头单.png"
          alt=""
        />
      </div>
      <div class="content-bottom">
        <div
          v-for="(item, index) in tabData[siderIndex].virtualMachineInfos"
          :key="index"
          class="content-bottom-item"
        >
          <div class="content-bottom-item-top">
            <div class="top1">
              <img
                v-if="item.status == 1"
                src="@/assets/fuwuqi/虚拟机正常.png"
                alt=""
              />
              <img v-else src="@/assets/fuwuqi/虚拟机异常.png" alt="" />
              <div style="margin-left: 20px">
                <div>{{ item.name }}</div>
                <div style="width: 100px; margin-top: 10px">
                  <el-progress
                    :text-inside="false"
                    :show-text="false"
                    :stroke-width="6"
                    :color="customColors"
                    :percentage="
                      item.diskUseRatio == null ? 0 : Number(item.diskUseRatio)
                    "
                  />
                </div>
              </div>
            </div>
            <div class="top2">
              <div style="display: flex; align-items: center">
                <span
                  v-if="item.status == 1"
                  class="top-status-iconblue"
                ></span>
                <span v-else class="top-status-iconred"></span>
                <span
                  v-if="item.status == 1"
                  class="blue ftsz12"
                  style="margin-left: 5px"
                  >正常</span
                >
                <el-popover
                  v-else
                  placement="bottom"
                  :width="400"
                  trigger="click"
                  popper-class="top-wrap1"
                >
                  <template #reference>
                    <div style="display: flex; align-items: center">
                      <span style="color: #f56c6c; margin: 0 5px">异常</span>
                      <img src="@/assets/fuwuqi/异常图标.png" alt="" />
                    </div>
                  </template>
                  <div class="content">
                    <div>异常排查</div>
                    <div style="max-height: 240px; overflow-y: auto">
                      <div>{{ item.errInfos }}</div>
                    </div>
                  </div>
                </el-popover>
              </div>
              <div style="margin-top: 10px">
                <span class="white2 ftsz12">磁盘占用：</span>
                <span class="blue ftsz12"
                  >{{ item.use }}G/{{ item.diskTotal }}G</span
                >
              </div>
            </div>
            <div class="top3">
              <el-button
                type="danger"
                plain
                size="mini"
                @click="reStart('重启', item)"
                >重启</el-button
              >
            </div>
          </div>
          <el-divider></el-divider>
          <div class="content-bottom-item-center">
            <span style="display: flex; justify-content: space-evenly">
              <span style="display: inline-block">
                <span class="white2 ftsz12">CPU使用率：</span>
                <span class="blue ftsz12">
                  {{ item.cpuOccupy ? item.cpuOccupy + "%" : "--" }}
                </span>
              </span>
              <span style="display: inline-block">
                <span class="white2 ftsz12">内存使用率：</span>
                <span class="blue ftsz12">
                  {{ item.memoryOccupy ? item.memoryOccupy + "%" : "--" }}
                </span>
              </span>
            </span>
            <span
              style="
                display: flex;
                justify-content: space-evenly;
                margin-top: 10px;
              "
            >
              <span style="display: inline-block">
                <span class="white2 ftsz12">IP：</span>
                <span class="blue ftsz12">
                  {{ item.ip ? item.ip : "--" }}
                </span>
              </span>
              <span style="display: inline-block">
                <span class="white2 ftsz12">操作系统：</span>
                <span class="blue ftsz12">
                  {{ item.operateSystem ? item.operateSystem : "--" }}
                </span>
              </span>
            </span>
            <el-popover
              placement="right"
              :width="400"
              trigger="click"
              popper-class="wrap2"
            >
              <template #reference>
                <div
                  class="fwqMore"
                  style="
                    width: 50px;
                    color: #49a6f2;
                    position: relative;
                    margin-left: 50%;
                    transform: translate(-50%);
                    cursor: pointer;
                    font-size: 12px;
                    margin-top: 10px;
                  "
                >
                  更多 >
                </div>
              </template>
              <div class="content">
                <div
                  style="
                    display: flex;
                    flex-wrap: wrap;
                    justify-content: space-between;
                    color: rgba(255, 255, 255, 1);
                  "
                >
                  <div>
                    <span>CPU核心:</span>
                    <span
                      style="color: rgba(97, 242, 218, 1); padding-left: 5px"
                      >{{ item.osCpuCores ? item.osCpuCores : "--" }}</span
                    >
                  </div>
                  <div>
                    <span>操作系统:</span>
                    <span
                      style="color: rgba(97, 242, 218, 1); padding-left: 5px"
                      >{{
                        item.operateSystem ? item.operateSystem : "--"
                      }}</span
                    >
                  </div>
                  <div>
                    <span>内存:</span>
                    <span
                      style="color: rgba(97, 242, 218, 1); padding-left: 5px"
                      >{{ (item.memory / 1024).toFixed(2) }}G</span
                    >
                  </div>
                </div>
                <div style="display: flex; align-items: center">
                  <div>
                    <span>CPU线程:</span>
                    <span
                      style="color: rgba(97, 242, 218, 1); padding-left: 5px"
                      >{{ item.totalThreads ? item.totalThreads : "--" }}</span
                    >
                  </div>
                  <div style="margin-left: 32px">
                    <span>安装路径:</span>
                    <span
                      style="color: rgba(97, 242, 218, 1); padding-left: 5px"
                      >{{ item.place ? item.place : "--" }}</span
                    >
                  </div>
                </div>
              </div>
            </el-popover>
          </div>
          <div class="content-bottom-item-bottom">
            <div style="text-align: center">应用</div>
            <el-carousel height="310px">
              <el-carousel-item
                v-for="(item2, index2) in item.lunboData"
                :key="index2"
              >
                <div
                  v-for="(item3, index3) in item2"
                  style="
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    margin: 30px 0;
                  "
                >
                  <div class="bottom-left">
                    <img
                      v-if="
                        item3.applicationType == '数据库' && item3.status == 1
                      "
                      src="@/assets/fuwuqi/正常库.png"
                      alt=""
                    />
                    <img
                      v-if="
                        item3.applicationType == '数据库' && item3.status == 0
                      "
                      src="@/assets/fuwuqi/未开启库.png"
                      alt=""
                    />
                    <img
                      v-if="
                        item3.applicationType == '数据库' && item3.status == 3
                      "
                      src="@/assets/fuwuqi/异常库.png"
                      alt=""
                    />
                    <img
                      v-else-if="item3.applicationType == 'KAFKA'"
                      src="@/assets/fuwuqi/kafka.png"
                      alt=""
                    />
                    <span
                      v-else-if="
                        item3.applicationType !== '数据库' &&
                        item3.applicationType !== 'KAFKA'
                      "
                    >
                      <img
                        v-if="item3.status == 1"
                        src="@/assets/fuwuqi/K1正常.png"
                        alt=""
                      />
                      <img
                        v-if="item3.status == 3"
                        src="@/assets/fuwuqi/K1异常.png"
                        alt=""
                      />
                      <img
                        v-if="item3.status == 0"
                        src="@/assets/fuwuqi/K1未开启.png"
                        alt=""
                      />
                    </span>
                  </div>
                  <div class="bottom-right">
                    <div class="bottom-right-top">
                      <div class="bottom-right-top-left">
                        <span class="ftsz12">{{ item3.name }}</span>
                        <div
                          style="
                            display: flex;
                            align-items: center;
                            margin-left: 15px;
                          "
                        >
                          <span
                            v-if="item3.status == 1"
                            class="top-status-iconblue"
                          ></span>
                          <span
                            v-if="item3.status == 0"
                            class="top-status-icongray"
                          ></span>
                          <span
                            v-if="item3.status == 3"
                            class="top-status-iconred"
                          ></span>
                          <span
                            v-if="item3.status == 1"
                            class="blue ftsz12"
                            style="margin-left: 5px"
                            >正常</span
                          >
                          <span
                            v-if="item3.status == 0"
                            class="ftsz12"
                            style="margin-left: 5px; color: #9da6b3"
                            >未开启</span
                          >
                          <el-popover
                            v-if="item3.status == 3"
                            placement="right"
                            :width="280"
                            trigger="click"
                            popper-class="wrap2"
                          >
                            <template #reference>
                              <div style="display: flex; align-items: center">
                                <span style="color: #f56c6c; margin: 0 5px"
                                  >异常</span
                                >
                                <img
                                  src="@/assets/fuwuqi/异常图标.png"
                                  alt=""
                                />
                              </div>
                            </template>
                            <div class="content">
                              <div>异常排查</div>
                              <div style="max-height: 240px; overflow-y: auto">
                                <div>异常排查内容</div>
                              </div>
                            </div>
                          </el-popover>
                        </div>
                      </div>
                      <div class="bottom-right-top-right">
                        <div>
                          <el-button
                            type="primary"
                            sty
                            plain
                            size="mini"
                            @click="reStart('操作', item3)"
                            >操作</el-button
                          >
                        </div>
                        <el-popover
                          placement="right"
                          :width="500"
                          trigger="click"
                          popper-class="wrap2"
                        >
                          <template #reference>
                            <div
                              class="fwqMore"
                              style="
                                width: 50px;
                                color: #49a6f2;
                                position: relative;
                                text-align: right;
                                cursor: pointer;
                                font-size: 12px;
                              "
                            >
                              更多 >
                            </div>
                          </template>
                          <div
                            v-if="item3.applicationType == '数据库'"
                            class="content"
                          >
                            <div
                              style="
                                display: flex;
                                flex-wrap: wrap;
                                justify-content: space-between;
                                color: rgba(255, 255, 255, 1);
                              "
                            >
                              <div>
                                <span>CPU使用率:</span>
                                <span
                                  style="
                                    color: rgba(97, 242, 218, 1);
                                    padding-left: 5px;
                                  "
                                  >{{
                                    item3.cpuOccupy
                                      ? item3.cpuOccupy + "%"
                                      : "--"
                                  }}</span
                                >
                              </div>
                              <div>
                                <span>内存使用率:</span>
                                <span
                                  style="
                                    color: rgba(97, 242, 218, 1);
                                    padding-left: 5px;
                                  "
                                  >{{
                                    item3.memoryOccupy
                                      ? item3.memoryOccupy + "%"
                                      : "--"
                                  }}</span
                                >
                              </div>
                              <div>
                                <span>预计可用时长:</span>
                                <span
                                  style="
                                    color: rgba(97, 242, 218, 1);
                                    padding-left: 5px;
                                  "
                                  >{{
                                    item3.expectedAvailableTime
                                      ? item3.expectedAvailableTime
                                      : "--"
                                  }}</span
                                >
                              </div>
                            </div>
                            <div
                              style="
                                display: flex;
                                align-items: center;
                                justify-content: space-between;
                                margin: 10px 0;
                              "
                            >
                              <div>
                                <span>端口:</span>
                                <span
                                  style="
                                    color: rgba(97, 242, 218, 1);
                                    padding-left: 5px;
                                  "
                                  >{{ item3.port ? item3.port : "--" }}</span
                                >
                              </div>
                              <div>
                                <span>IP:</span>
                                <span
                                  style="
                                    color: rgba(97, 242, 218, 1);
                                    padding-left: 5px;
                                  "
                                  >{{ item3.ip ? item3.ip : "--" }}</span
                                >
                              </div>
                              <div>
                                <span>网络延迟:</span>
                                <span
                                  style="
                                    color: rgba(97, 242, 218, 1);
                                    padding-left: 5px;
                                  "
                                  >{{
                                    item3.networkDelay
                                      ? item3.networkDelay
                                      : "--"
                                  }}</span
                                >
                              </div>
                            </div>
                            <div style="display: flex; align-items: center">
                              <div>
                                <span>最近更新:</span>
                                <span
                                  style="
                                    color: rgba(97, 242, 218, 1);
                                    padding-left: 5px;
                                  "
                                  >{{
                                    item3.lastUpdateTime
                                      ? item3.lastUpdateTime
                                      : "--"
                                  }}</span
                                >
                              </div>
                            </div>
                          </div>
                          <div
                            v-else
                            style="display: flex; align-items: center"
                          >
                            <div>
                              <span>安装目录:</span>
                              <span
                                style="
                                  color: rgba(97, 242, 218, 1);
                                  padding-left: 5px;
                                "
                                >{{
                                  item3.deployPath ? item3.deployPath : "--"
                                }}</span
                              >
                            </div>
                          </div>
                        </el-popover>
                      </div>
                    </div>
                    <div class="bottom-right-bottom">
                      <span
                        v-if="item3.applicationType == '数据库'"
                        class="cp_list_data"
                        v-for="item4 in item3.dataSourceDiskInfos"
                      >
                        <span class="white2 ftsz12" v-if="item4.diskPath == '/'"
                          >占用空间:</span
                        >
                        <span class="white2 ftsz12" v-else
                          >占用{{ item4.diskPath.split(":")[0] }}盘空间:</span
                        >
                        <!-- <el-tooltip class="blue ftsz12" effect="customized" placement="top"
                                      :content="item4.diskUse + `G/` + item4.diskTotal + `G`">
                                      <span>{{ item4.diskUse }}G/{{ item4.diskTotal }}G</span>
                                    </el-tooltip> -->
                        <span class="blue ftsz12"
                          >{{ item4.diskUse }}G/{{ item4.diskTotal }}G</span
                        >
                      </span>
                      <span
                        v-if="item3.applicationType !== '数据库'"
                        style="
                          display: flex;
                          align-items: center;
                          justify-content: space-between;
                          width: 100%;
                        "
                      >
                        <span>
                          <span class="white2 ftsz12">IP：</span>
                          <span class="blue ftsz12">{{ item3.ip }}</span>
                        </span>
                        <span>
                          <span class="white2 ftsz12">端口：</span>
                          <span class="blue ftsz12">{{ item3.port }}</span>
                        </span>
                        <span>
                          <span class="white2 ftsz12">最近更新时间：</span>
                          <span class="blue ftsz12">{{
                            item3.lastUpdateTime
                          }}</span>
                        </span>
                      </span>
                    </div>
                  </div>
                </div>
              </el-carousel-item>
            </el-carousel>
          </div>
        </div>
      </div>
    </div>
    <!-- 重启 -->
    <el-dialog
      :visible.sync="isReStart"
      width="30%"
      :before-close="reStarthandleClose"
      custom-class="operateDialog3"
    >
      <span slot="title" style="font-size: 16px">{{ restartTitle }}</span>
      <div style="padding: 0 10px; text-align: center">
        <div
          style="
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 20px;
          "
        >
          <span>{{ reStartObj.name }}</span>
          <!-- <span style="display: flex; align-items: center; margin-left: 10px">
            <span
              style="
                width: 5px;
                height: 5px;
                border-radius: 50%;
                background-color: #9da6b3;
                display: inline-block;
              "
            ></span>
            <span class="gray ftsz12" style="margin-left: 5px">未开启</span>
          </span> -->
        </div>
        <div v-if="restartTitle == '操作' && reStartObj.status == 0">
          <el-radio v-model="radio" label="start">开启</el-radio>
        </div>
        <div v-else-if="restartTitle == '操作' && reStartObj.status == 1">
          <el-radio-group v-model="radioGrop">
            <el-radio label="stop">关闭</el-radio>
            <el-radio label="restart">重启</el-radio>
            <!-- <el-radio v-if="state.appStatus == 1 || state.appStatus !== 0" label="stop" size="small"
                      style="color:rgba(255,255,255,1)">关闭</el-radio>
                    <el-radio v-if="state.appStatus == 0" label="start" size="small"
                      style="color:rgba(255,255,255,1)">开启</el-radio>
                    <el-radio v-if="state.appStatus == 1 || state.appStatus !== 0" label="restart" size="small"
                      style="color:rgba(255,255,255,1)">重启</el-radio> -->
          </el-radio-group>
        </div>
        <div v-else>
          <el-radio v-model="radio" label="1">重启</el-radio>
        </div>
        <div
          style="
            width: 50%;
            margin-top: 20px;
            margin-left: 50%;
            transform: translate(-50%);
          "
        >
          <el-form :model="form" :rules="rules" ref="form">
            <el-form-item label="密码" prop="password">
              <el-input
                size="small"
                style="width: 80%"
                v-model="form.password"
                placeholder="请输入密码"
              ></el-input>
            </el-form-item>
          </el-form>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="reStarthandleClose">取 消</el-button>
        <el-button size="small" type="primary" @click="reStartSubmit"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import axios from "@/utils/request";
import axios2 from "@/utils/request2";
export default {
  data() {
    return {
      fuwuqiUrl: process.env.VUE_APP_SERVER_URL, //服务器地址
      siderIndex: 0,
      tabData: [
        {
          name: "服务器1",
          img: require("@/assets/fuwuqi/服务器选中.png"),
          img2: require("@/assets/fuwuqi/服务器未选中.png"),
        },
        // {
        //   name: "服务器2",
        //   img: require("@/assets/fuwuqi/服务器选中.png"),
        //   img2: require("@/assets/fuwuqi/服务器未选中.png"),
        // },
      ],
      fuwuqiState: "正常",
      cipanData: [
        {
          name: "本地固定磁盘 (C:)",
          usedSpace: 127754,
          totalSpace: 227298,
        },
        {
          name: "本地固定磁盘 (D:)",
          usedSpace: 12254,
          totalSpace: 22298,
        },
        {
          name: "本地固定磁盘 (E:)",
          usedSpace: 127554,
          totalSpace: 226298,
        },
        {
          name: "本地固定磁盘 (F:)",
          usedSpace: 120354,
          totalSpace: 223298,
        },
        {
          name: "本地固定磁盘 (G:)",
          usedSpace: 127254,
          totalSpace: 222298,
        },
      ],
      // anzhuangData: [
      //   {
      //     cpuOccupy: 4, //cpu使用率
      //     memoryOccupy: 30, //内存使用率
      //     hostIpv4s: ["192.168.1.101", "192.168.1.102"], //主机ipv4地址
      //     networkInterfaceCount: 2, //网卡个数
      //     operateSystem: "Windows Server 2012 R2", //操作系统
      //   },
      // ],
      customColors: ["#49a6f2"],
      isReStart: false, //重启
      restartTitle: "重启",
      reStartObj: {}, //重启对象
      radio: "start",
      radioGrop: "1",
      form: {},
      rules: {
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
      },
      topMoreObj: {
        //顶部更多
        systemVersion: "1", //系统版本
        osCpuCores: "2", //cpu核心
        totalThreads: "3", //cpu线程
        memory: "4", //内存
        graphicsCards: "5", //显卡信息
        networkInterfaceCount: "6", //网卡数量
      },
      lunboData: [
        { name: "1", img: require("@/assets/fuwuqi/kafka.png") },
        { name: "1", img: require("@/assets/fuwuqi/kafka.png") },
        { name: "1", img: require("@/assets/fuwuqi/kafka.png") },
      ],
      errInfos: [], //异常配置
    };
  },
  methods: {
    siderSelectFn(index) {
      //侧边栏选择事件
      this.siderIndex = index;
      console.log(index, "index");
    },
    //重启
    reStart(val, val2) {
      console.log(val, val2);
      this.restartTitle = val;
      this.reStartObj = val2;
      this.isReStart = true;
    },
    reStarthandleClose() {
      this.isReStart = false;
      this.$refs.form.resetFields();
    },
    reStartSubmit() {
      if (this.restartTitle == "重启") {
        this.$refs.form.validate((valid) => {
          if (valid) {
            axios2
              .get(this.fuwuqiUrl+"/diagnosis/platformCommun/validPassword", {
                params: {
                  password: this.form.password,
                },
              })
              .then((res) => {
                let obj = {};
                if (res.code == 200) {
                  this.$message.success("密码正确,请等待...");
                  // let loadingInstance2 = Loading.service({
                  //   target: ".operateDialog3",
                  //   lock: true,
                  //   text: "操作中",
                  // });
                  if (
                    this.reStartObj.name.includes("服务器") ||
                    this.reStartObj.name.includes("虚拟机")
                  ) {
                    obj.command = this.radio == "1" ? "restart" : "";
                    obj.machineId = this.reStartObj.id;
                  } else {
                    obj.command = this.radio == "1" ? "restart" : "";
                    obj.appId = this.reStartObj.id;
                  }
                  axios2
                    .post(this.fuwuqiUrl+"/agent/system/command", obj)
                    .then((res) => {
                      if (res.data == true) {
                        this.$message.success("操作成功");
                        this.getErrorList();
                        // loadingInstance2.close();
                        // operatedialogVisible3.value = false;
                        // postRef.value.resetFields();
                      } else {
                        this.$message.error("操作失败");
                        // loadingInstance2.close();
                        // operatedialogVisible3.value = false;
                        // postRef.value.resetFields();
                      }
                      this.form = {};
                      this.isReStart = false;
                    })
                    .catch((error) => {
                      // loadingInstance2.close();
                      // operatedialogVisible3.value = false;
                      // postRef.value.resetFields();
                    });
                } else {
                  this.$message.error("密码错误");
                }
              });
          } else {
            return false;
          }
        });
      } else if (this.restartTitle == "操作") {
        this.$refs.form.validate((valid) => {
          if (valid) {
            axios2
              .get(this.fuwuqiUrl+"/diagnosis/platformCommun/validPassword", {
                params: {
                  password: this.form.password,
                },
              })
              .then((res) => {
                if (res.code == 200) {
                  this.$message.success("密码正确,请等待...");
                  // let loadingInstance2 = Loading.service({
                  //   target: ".operateDialog3",
                  //   lock: true,
                  //   text: "操作中",
                  // });
                  axios2
                    .post(this.fuwuqiUrl+"/agent/project/command", {
                      command:
                        this.reStartObj.status == 0
                          ? this.radio
                          : this.radioGrop,
                      appId: this.reStartObj.id,
                    })
                    .then((res) => {
                      if (res.data == true) {
                        this.$message.success("操作成功");
                        this.getErrorList();
                        // loadingInstance2.close();
                        // operatedialogVisible3.value = false;
                        // postRef.value.resetFields();
                      } else {
                        this.$message.error("操作失败");
                        // loadingInstance2.close();
                        // operatedialogVisible3.value = false;
                        // postRef.value.resetFields();
                      }
                      this.form = {};
                      this.isReStart = false;
                    })
                    .catch((error) => {
                      // loadingInstance2.close();
                      // operatedialogVisible3.value = false;
                      // postRef.value.resetFields();
                    });
                } else {
                  this.$message.error("密码错误");
                }
              });
          } else {
            return false;
          }
        });
      }
    },
    getErrorList() {
      //异常配置
      let data = [];
      axios2.post(this.fuwuqiUrl+"/diagnosis/errorConfiguration/list", {}).then((res) => {
        res.data.list.forEach((item) => {
          this.errInfos = item.desc;
        });
      });
      axios2.get(this.fuwuqiUrl+"/diagnosis/platformCommun/machineInfos", {}).then((res) => {
        res.data.forEach((item, index) => {
          // item.statu = false
          item.img = require("@/assets/fuwuqi/服务器选中.png");
          item.img2 = require("@/assets/fuwuqi/服务器未选中.png");
          // item.type = (index + 1).toString()
          item.errInfos = this.errInfos;

          item.virtualMachineInfos.forEach((item2) => {
            item2.errInfos = this.errInfos;
            item2.diskTotal = Number(item2.diskTotal / 1024).toFixed(2);
            item2.use = Number(
              item.diskUseRatio * (item2.diskTotal / 100)
            ).toFixed(2);
            console.log(item2, "item3");
            axios2
              .get(
                this.fuwuqiUrl+"/diagnosis/platformCommun/applications?parentId=" + item2.id
              )
              .then((res) => {
                let arr = _.chunk(res.data, 3);
                item2.lunboData = arr;
              });
          });
          if (item.status == 0) {
            item.fuwuqiState = "异常";
          } else {
            item.fuwuqiState = "正常";
          }

          data.push(item);
          setTimeout(() => {
            this.tabData = data;
          }, 500);
          console.log(this.tabData, "this.tabData ");
        });
      });
    },
  },
  created() {
    this.getErrorList();
    console.log(this.fuwuqiUrl, "this.fuwuqiUrl ");
  },
};
</script>

<style lang="scss" scoped>
::v-deep .el-progress-bar__outer {
  background-color: #104566 !important;
}
.red {
  color: #f56c6c;
}
.blue {
  color: #409eff;
}
.gray {
  color: #9da6b3;
}
.white {
  color: #fff;
}
.white2 {
  color: #9da6b3;
}
.ftsz12 {
  font-size: 12px;
}
.blue {
  color: #49a6f2;
}
.top-status-iconred {
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: #f56c6c;
}
.top-status-iconblue {
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: #49a6f2;
}
.top-status-icongray {
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: #99acb9;
}
.zizhenduan {
  color: #fff;
  // height: 760px;
  display: flex;
  justify-content: space-between;
  .sider {
    width: 5%;
    height: 100%;
    text-align: center;
    .sider-item {
      margin-bottom: 10px;
      display: flex;
      flex-direction: column;
      align-items: center;
    }
  }
  .content {
    width: 94%;
    //右侧内容头部
    .content-top {
      padding: 0 20px;
      width: 100%;
      // height: 100px;
      border-radius: 3px;
      box-shadow: inset 0 0 30px #1b4a7d;
      .content-top-t {
        width: 100%;
        height: 50%;
        padding: 10px 0;
        display: flex;
        align-items: center;
        position: relative;
        .content-top-t-left {
          white-space: nowrap;
          display: flex;
          align-items: center;
          .top-title {
            color: #fff;
          }
          .top-status {
            margin-left: 5px;
            display: flex;
            align-items: center;
          }
          // .top-status-iconred {
          //   display: inline-block;
          //   width: 5px;
          //   height: 5px;
          //   border-radius: 50%;
          //   background-color: #f56c6c;
          // }
          // .top-status-iconblue {
          //   display: inline-block;
          //   width: 5px;
          //   height: 5px;
          //   border-radius: 50%;
          //   background-color: #49a6f2;
          // }
          .top-status-text {
            margin-left: 5px;
            font-size: 12px;
          }
        }
        .content-top-t-right {
          .cipanTop {
            display: flex;
            align-items: center;
            justify-content: space-between;
          }
          .cipanBottom {
            margin-top: 10px;
          }
        }
      }
      .content-top-b {
        width: 100%;
        height: 50%;
        padding: 10px 0;
        display: flex;
        align-items: center;
        .content-top-b-left {
          white-space: nowrap;
        }
        .content-top-b-right {
          position: relative;
          width: 100%;
        }
      }
    }
    //右侧内容中间
    .content-center {
      width: 100%;
      height: 52px;
      display: flex;
      align-items: center;
      justify-content: space-around;
      img {
        width: 20px;
        height: 25px;
      }
    }
    //右侧内容底部
    .content-bottom {
      width: 100%;
      display: flex;
      justify-content: space-around;
      .content-bottom-item {
        width: 30%;
        // height: 550px;
        border-radius: 6px;
        padding: 14.09px 14.09px 14.09px 14.09px;
        background-image: linear-gradient(
            to right,
            rgba(64, 158, 255, 1) 50%,
            rgba(255, 255, 255, 0) 0%
          ),
          linear-gradient(rgba(64, 158, 255, 1) 50%, rgba(255, 255, 255, 0) 0%),
          linear-gradient(
            to left,
            rgba(64, 158, 255, 1) 50%,
            rgba(255, 255, 255, 0) 0%
          ),
          linear-gradient(
            to top,
            rgba(64, 158, 255, 1) 50%,
            rgba(255, 255, 255, 0) 0%
          );
        background-position: top, right, bottom, left;
        background-size: 20px 1px, 1px 20px, 20px 1px, 1px 20px;
        background-repeat: repeat-x, repeat-y, repeat-x, repeat-y;
        .content-bottom-item-top {
          display: flex;
          justify-content: space-between;
          .top1 {
            display: flex;
            align-items: center;
            justify-content: space-between;
          }
          // .top2 {
          // }
          .top3 {
            margin-top: 5px;
          }
        }
        .content-bottom-item-center {
          width: 100%;
        }
        .content-bottom-item-bottom {
          width: 100%;
          // height: 67%;
          // height: 350px;
          border: 1px solid #1b4a7d;
          border-radius: 6px;
          padding: 10px;
          margin-top: 10px;
          box-shadow: inset 0 0 30px #1b4a7d;
          .bottom-left {
            width: 10%;
            img {
              width: 30px;
              height: 40px;
            }
          }
          .bottom-right {
            width: 90%;
            .bottom-right-top {
              display: flex;
              align-items: center;
              justify-content: space-between;
              .bottom-right-top-left {
                // width: 120px;
                display: flex;
                align-items: center;
                justify-content: space-between;
              }
              .bottom-right-top-right {
                width: 120px;
                display: flex;
                align-items: center;
                flex-wrap: wrap;
                justify-content: space-between;
              }
            }
          }
          .bottom-right-bottom {
            margin: 5px 0;
            display: flex;
            align-items: center;
            justify-content: space-between;
          }
        }
      }
    }
  }
}
</style>
<style scoped lang="scss">
::v-deep .el-dialog__footer {
  background-color: #061f41;
}
.dialog-footer {
  display: flex;
  justify-content: center;
}
::v-deep .el-form-item__label {
  color: rgba(255, 255, 255, 0.6);
}
::v-deep .el-input__inner {
  background-color: #113765;
  border: none;
  color: #fff;
}
::v-deep .el-form-item__error {
  margin-left: 49%;
  transform: translate(-100%);
}

.el-popper.customized {
  /* Set padding to ensure the height is 32px */
  padding: 6px 12px;
  background: linear-gradient(90deg, rgb(159, 229, 151), rgb(204, 229, 129));
}

.el-popper.customized .el-popper__arrow::before {
  background: linear-gradient(45deg, #b2e68d, #bce689);
  right: 0;
}

::v-deep .el-progress-bar__outer {
  background: rgba(50, 219, 255, 0.2);
}

::v-deep .el-carousel__button {
  width: 20px;
  height: 4px;
  border-radius: 2px;
}
::v-deep .el-button--danger.is-plain {
  //危险按钮样式
  background-color: #3f3650;
  border-color: #f56c6c;
  color: #f56c6c;
}
::v-deep .el-button--primary.is-plain {
  background-color: #133a67;
  border-color: #49a6f2;
  color: #49a6f2;
}
::v-deep .el-divider {
  //分割线颜色
  background-color: #205774;
}
::v-deep .el-radio {
  color: #fff !important;
}
</style>
<!-- el-popover弹出层 -->
<style lang="scss">
.top-wrap1 {
  /* 背景色 */
  background: #113765 !important;
  /* opacity: 1 !important; */
  color: #fff !important;
  /* border: none !important; */
  border: 1px solid #1b4a7d !important;
  backdrop-filter: blur(15px) !important;
  position: absolute !important;
  left: 340px !important;
  top: 110px !important;
}
.wrap2 {
  /* 背景色 */
  background: #113765 !important;
  /* opacity: 1 !important; */
  color: #fff !important;
  /* border: none !important; */
  border: 1px solid #1b4a7d !important;
  backdrop-filter: blur(15px) !important;
  position: absolute !important;
  // left: 0px !important;
  // top: 275px !important;
}
.wrap4 {
  /* 背景色 */
  background: #113765 !important;
  /* opacity: 1 !important; */
  color: #fff !important;
  /* border: none !important; */
  border: 1px solid #1b4a7d !important;
  backdrop-filter: blur(15px) !important;
  position: absolute !important;
  // left: 360px !important;
  // left: 50% !important;
  // transform: translate(-50%);
  // // top: 202px !important;
  // top: 22.2% !important;
}
/*隐藏三角形箭头*/
.popper__arrow {
  display: none !important;
}
// .el-radio__label{
//   color: #fff !important;
// }
//  .el-radio-group{
// color: #46a6ff !important;
// }
// .el-radio {
//   color: #fff !important;
// }
// *::-webkit-scrollbar {
//   width: 5px;
//   height: 5px;
//   background-color: transparent;
// } /*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
// *::-webkit-scrollbar-track {
//   background-color: #f0f6ff;
// } /*定义滚动条轨道 内阴影+圆角*/
// *::-webkit-scrollbar-thumb {
//   background-color: #1890ff;
//   border-radius: 6px;
// } /*定义滑块 内阴影+圆角*/
// .scrollbarHide::-webkit-scrollbar {
//   display: none;
// }
// .scrollbarShow::-webkit-scrollbar {
//   display: block;
// }
</style>